<template>
  <div class="infinite-container" style="padding-bottom:50px;">
    <div style="scroll-wrapper">
      <!-- 轮播图，支持多张 -->
      <swipe class="index-swipe">
        <swipe-item class="slide">
            <img src="../assets/images/banner_index@2x.png">
        </swipe-item>
      </swipe>

      <!-- 主菜单 -->
      <div class="hdbox-wrap">
        <mu-flexbox class="pb10">
          <mu-flexbox-item class="text-center pd10" @click.native="go('/appointment/tips')">
            <i class="w-icon w-icon-yygh v-middle inline-block"></i>
            <span>预约挂号</span>
          </mu-flexbox-item>
          <mu-flexbox-item class="text-center pd10"  @click.native="go('/inpatient-care/prePayHand?selectperson=1')" style="border-left:1px solid #f2f2f2;">
            <i class="w-icon w-icon-zscz v-middle inline-block"></i>
            <span>掌上充值</span>
          </mu-flexbox-item>
        </mu-flexbox>
        <div class="hdbox">
          <mu-flexbox class="setting-nav">
            <mu-flexbox-item @click.native="go('/about/interguide')">
              <i class="w-icon w-icon-zndz inline-block"></i>            
              <div>智能导诊</div>
            </mu-flexbox-item>          
            <mu-flexbox-item @click.native="go('/appointment/getNumber')">
              <i class="w-icon w-icon-qdqh inline-block"></i>            
              <div>签到取号</div>
            </mu-flexbox-item>
            <mu-flexbox-item @click.native="go('/mainWait')">
              <i class="w-icon w-icon-pdjh inline-block"></i>            
              <div>排队叫号</div>
            </mu-flexbox-item>
            <mu-flexbox-item @click.native="go('/mainReportRecord', '1')">
              <i class="w-icon w-icon-mzbg inline-block"></i>            
              <div>门诊报告</div>
            </mu-flexbox-item>
          </mu-flexbox>

          <mu-flexbox class="setting-nav">
            <mu-flexbox-item @click.native="go('/mainFeeRecord')">
              <i class="w-icon w-icon-mzfy inline-block"></i>            
              <div>门诊费用</div>
            </mu-flexbox-item>
            <mu-flexbox-item @click.native="go('/about/news')">
              <i class="w-icon w-icon-xwgg inline-block"></i>            
              <div>新闻公告</div>
            </mu-flexbox-item>
          
            <mu-flexbox-item @click.native="go('/about')" >
              <i class="w-icon w-icon-zxzx inline-block"></i>            
              <div>医院介绍</div>
            </mu-flexbox-item>
            <mu-flexbox-item @click.native="go('/about/price')">
              <i class="w-icon w-icon-jggg inline-block"></i>            
              <div>价格公示</div>
            </mu-flexbox-item>
          </mu-flexbox>
        </div>
      </div>

      <!-- 住院入口 -->
      <div class="large-banner mt10">
        <div class="b-title">住院入口</div>
        <mu-flexbox class="setting-nav" style="padding:0 15px;">
          <mu-flexbox-item class="re" :grow="5" @click.native="go('/mainReportRecord', '2')">
            <img src="../assets/images/img_index_zybg@2x.png" />
          </mu-flexbox-item>
          <mu-flexbox-item :grow="6">
            <div  @click="go('/inpatient-care/fee')" class="re">
              <img src="../assets/images/img_index_yrqd@2x.png" />
            </div>
            <div  @click="go('/inpatient-care/prePay')" class="re mt6">
              <img src="../assets/images/img_index_zyjyj@2x.png" />
            </div>
          </mu-flexbox-item>
        </mu-flexbox>
      </div>

    </div>
  </div>
</template>
<script>
import 'vue-swipe/dist/vue-swipe.css'
import { Swipe, SwipeItem } from 'vue-swipe'
export default {
  components: {Swipe, SwipeItem},
  mounted () {
    this.$store.commit('UPDATE_LOADING', false)
    this.$store.commit('UPDATE_FOOTER')
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_FOOTER')
  },
  data () {
    return {
    }
  },
  methods: {
    go (url, type) {
      if (!url) {
        this.$store.commit('UPDATE_TOAST', {message: '正在努力开发中...'})
        return
      }
      let u1 = url
      if (type) {
        u1 = url + '?type=' + type
      }
      this.$router.push(u1)
    }
  }
}
</script>
<style lang="less" scoped>
 @import '../common/css/vars.less';
 .scroll-wrapper {
   min-height: calc(100% + 1px);
 }
 .index-swipe {
  text-align: center;
  height: 150px;
}
.hdbox-wrap{
  background: #fff;
  padding:  15px 0;
}
.text-hide {
  text-indent: -9999px;
}
.large-banner{
  margin-bottom: 15px;
  padding: 10px 0;
  background: #Fff;
  .b-title {
    padding-left: 15px;
    padding-bottom: 15px;
    font-size: 1.3em;
  }
}
.hdbox{
  border-radius: 6px;
  margin:0 15px;
  background: #fff;
  border-top: 1px solid #f2f2f2;
}
.setting-nav {
  text-align: center;
  padding: 1.5em 0;
}
</style>
